<template>
  <div class="app-container">
    <el-card>
      <!-- 顶部按钮栏 start -->
      <div class="btn-box flex justify-between mb-20">
        <div class="flex align-center">
          <el-input
            v-model="keyWords"
            placeholder="请输入供应商名称进行搜索"
            class="mr-5"
            clearable
            @clear="doSearch"
          />
          <el-button type="primary" @click="doSearch">搜索</el-button>
        </div>
        <el-button type="primary" @click="toAddSupplier">新增供应商</el-button>
      </div>
      <!-- 顶部按钮栏 end -->

      <!-- 数据表格 start -->
      <PageTable :loading="loading" :data="dataSource" :columns="columns" :options="options" />
      <Pagination
        v-show="total > 0"
        :total="total"
        :pageNo.sync="listQuery.pageNo"
        :pageSize.sync="listQuery.pageSize"
        @pagination="getSupplierList"
      />
      <!-- 数据表格 end -->
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'GoodsSupplier',
  data() {
    return {
      // 搜索关键词
      keyWords: '',

      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,

      // 表格加载
      loading: true,
      // 表格配置
      options: {
        border: true
      },
      // 表格列
      columns: [
        {
          label: 'LOGO',
          render: (h, { row }) => {
            return <img style="width:60px;height:60px;" src={row.logo} />
          }
        },
        {
          prop: 'name',
          label: '供应商名称',
          render: (h, { row }) => {
            return <div style="color:#409eff;">{row.name}</div>
          }
        },
        {
          label: '是否显示',
          render: (h, { row }) => {
            return <div>{row.isShow ? '是' : '否'}</div>
          }
        },
        { prop: 'sort', label: '排序' },
        { prop: 'goodsNum', label: '商品数量' },
        { prop: 'createdTime', label: '创建时间' },
        {
          label: '操作',
          render: (h, { row }) => {
            return (
              <div>
                <el-link underline={false} type="primary" onClick={() => this.changeIsShow(row)}>
                  {row.isShow ? '隐藏' : '显示'}
                </el-link>
                <el-link
                  underline={false}
                  type="primary"
                  class="ml-10 mr-10"
                  onClick={() => this.toAddSupplier(row)}
                >
                  编辑
                </el-link>
                {!row.isShow ? (
                  <pop-confirm confirm={() => this.deleteSupplier(row)}>
                    <el-link type="primary" underline={false}>
                      删除
                    </el-link>
                  </pop-confirm>
                ) : (
                  ''
                )}
              </div>
            )
          }
        }
      ],
      // 表格源数据
      dataSource: []
    }
  },
  created() {
    // 获取供应商列表
    this.getSupplierList()
  },

  activated() {
    // 获取供应商列表
    this.getSupplierList()
  },

  destroyed() {
    console.log('被销毁')
  },
  methods: {
    // 获取供应商列表
    async getSupplierList() {
      try {
        const {
          data: { records, total }
        } = await this.$http.goods.supplier.page({
          params: { ...this.listQuery, name: this.keyWords }
        })
        this.dataSource = records
        this.total = total
        this.loading = false
      } catch (error) {
        console.log('getSupplierList', error)
      }
    },

    // 点击搜索
    doSearch() {
      this.listQuery.pageNo = 1
      this.getSupplierList()
    },

    /**
     * 跳转新增/编辑供应商
     * @param {Object} item 行数据
     */
    toAddSupplier({ id }) {
      this.$router.push({ name: 'AddSupplier', query: { id } })
    },

    /**
     * 切换显示隐藏
     * @param {Object} item 行数据
     */
    changeIsShow({ id, isShow }) {
      let message = isShow ? '已隐藏' : '已显示'
      this.$http.goods.supplier
        .show(id, !isShow)
        .then(res => {
          if (res.status === 200) {
            this.getSupplierList()
            this.$message.success(message)
            return
          }
          this.$message.error(res.msg)
        })
        .catch(err => {
          console.log('changeIsShow', err)
        })
    },

    /**
     * 删除规格
     * @param {Object} item 行数据
     */
    deleteSupplier({ id }) {
      this.$http.goods.supplier
        .delete(id)
        .then(res => {
          if (res.status === 200) {
            this.getSupplierList()
            this.$message.success('删除成功')
          }
        })
        .catch(err => {
          console.log('deleteSupplier', err)
        })
    }
  }
}
</script>

<style lang="scss" scoped></style>
